﻿@using PMS.Web.Models.Customers
@{
    ViewData["Title"] = "用户注册";
}
@model RegisterModel
@section CssLinks{
    <link href="~/lib/PearAdminLayui/component/pear/css/pear.css" rel="stylesheet" />
}
@section CssStyles{
    <style type="text/css">
        .layui-form-label {
            width: 120px !important;
        }

        .layui-input-inline {
            width: 280px !important;
        }

        .pw-strength {
            position: relative;
            top: 8px;
        }

        .pw-bar {
            float: left;
            width: 62px;
            height: 4px;
            margin-top: 5px;
            margin-left: 5px;
            font-size: 0px;
        }

        .pw-default {
            background: #d6d3d3;
        }

        .pw-weak {
            background: #ff3300 !important;
        }

        .pw-medium {
            background: #099 !important;
        }

        .pw-strong {
            background: #060 !important;
        }

        .pw-txt {
            padding-top: 2px;
            width: 220px;
            overflow: hidden;
        }

        .pw-txt span {
            color: #707070;
            float: left;
            font-size: 12px;
            text-align: center;
            width: 66px;
            margin-right: 2px;
        }
    </style>
}

<form class="layui-form" action="">
    <div class="main-container">
        <input type="text" class="layui-hide" name="@Model.NameOf(m => m.EmailEnabled)" value="@Model.EmailEnabled.ToString()" />
        <input type="text" class="layui-hide" name="@Model.NameOf(m => m.LoginnameEnabled)" value="@Model.LoginnameEnabled.ToString()" />
        <input type="text" class="layui-hide" name="@Model.NameOf(m => m.MobileEnabled)" value="@Model.MobileEnabled.ToString()" />
        <input type="text" class="layui-hide" name="@Model.NameOf(m => m.NicknameEnabled)" value="@Model.NicknameEnabled.ToString()" />
        <input type="text" class="layui-hide" name="@Model.NameOf(m => m.PasswordEnabled)" value="@Model.PasswordEnabled.ToString()" />

        @if (Model.EmailEnabled)
        {
            <div class="layui-form-item">
                <label class="layui-form-label">@Model.DisplayName(m => m.Email)</label>
                <div class="layui-input-inline">
                    <input type="text" name="@Model.NameOf(m => m.Email)" lay-verify="required|email" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">可通过Email找回密码，接收订单邮件等</div>
            </div>
        }
        @if (Model.LoginnameEnabled)
        {
            <div class="layui-form-item">
                <label class="layui-form-label">@Model.DisplayName(m => m.Loginname)</label>
                <div class="layui-input-inline">
                    <input type="text" id="loginname" name="@Model.NameOf(m => m.Loginname)" lay-verify="required" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux" asp-validation-for="Loginname">登录名为英文数字组成的唯一账号</div>
            </div>
        }
        @if (Model.MobileEnabled)
        {
            <div class="layui-form-item">
                <label class="layui-form-label">@Model.DisplayName(m => m.Mobile)</label>
                <div class="layui-input-inline">
                    <input type="text" name="@Model.NameOf(m => m.Mobile)" lay-verify="required|phone|number" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">请正确填写您的手机号</div>
            </div>
        }
        @if (Model.NicknameEnabled)
        {
            <div class="layui-form-item">
                <label class="layui-form-label">@Model.DisplayName(m => m.Nickname)</label>
                <div class="layui-input-inline">
                    <input type="text" name="@Model.NameOf(m => m.Nickname)" lay-verify="maxlen20" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">我们该怎样称呼您</div>
            </div>
        }
        @if (Model.PasswordEnabled)
        {
            <div class="layui-form-item">
                <label class="layui-form-label">@Model.DisplayName(m => m.Password)</label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name="@Model.NameOf(m => m.Password)" lay-verify="required" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">请输入您的账号密码并妥善保管</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码强度</label>
                <div id="level" class="layui-input-inline pw-strength">
                    <div class="pw-bar pw-default" id='pwdLevel_weak'> </div>
                    <div class="pw-bar pw-default" id='pwdLevel_medium'> </div>
                    <div class="pw-bar pw-default" id='pwdLevel_strong'> </div>
                    <div class="pw-txt">
                        <span>弱</span>
                        <span>中</span>
                        <span>强</span>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@Model.DisplayName(m => m.ConfirmPassword)</label>
                <div class="layui-input-inline">
                    <input type="password" name="@Model.NameOf(m => m.ConfirmPassword)" lay-verify="required|confirmPass" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">请再次确认您的输入密码</div>
            </div>
            <input type="text" class="layui-hide" id="pwdstrong" value="" name="@Model.NameOf(m => m.PasswordStrongLevel)" />
        }
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm register" lay-submit="" lay-filter="userRegister">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
            </div>
        </div>
    </div>
</form>
@await Component.InvokeAsync("ModelValidateError")
@section Scripts{
    <script src="~/lib/PearAdminLayui/component/layui/layui.js"></script>
    <script src="~/lib/PearAdminLayui/component/pear/pear.js"></script>
    <script src="~/dist/js/utils/passwordstrength.min.js"></script>
    <script src="~/dist/js/utils/frontendapiconfig.min.js" asp-append-version="true"></script>
    <script type="text/javascript">
        layui.use(['form', 'jquery', 'http', 'button', 'laytpl'], function () {
            var form = layui.form,
                $ = layui.jquery,
                button = layui.button,
                http = layui.http,
                laytpl = layui.laytpl;

            //密码强度校验
            var $passwordEl = $("#password");
            if ($passwordEl.length > 0) {
                var $usernameEl = $("#loginname"),
                    username = $usernameEl.length > 0 ? $usernameEl.val() : "",
                    $weakEl = $("#pwdLevel_weak"),
                    $mediumEl = $("#pwdLevel_medium"),
                    $strongEl = $("#pwdLevel_strong"),
                    $pwdstronginputEl = $("#pwdstrong");
                $passwordEl.keyup(function () {
                    $weakEl.removeClass('pw-weak');
                    $mediumEl.removeClass('pw-medium');
                    $strongEl.removeClass('pw-strong');
                    var strength = PasswordStrength.test(username, $(this).val());
                    if (strength.isWeak()) {
                        $weakEl.addClass('pw-weak');
                        $pwdstronginputEl.val("Weak");
                    } else if (strength.isGood()) {
                        $weakEl.addClass('pw-weak');
                        $mediumEl.addClass('pw-medium');
                        $pwdstronginputEl.val("Good");
                    } else if (strength.isStrong()) {
                        $weakEl.addClass('pw-weak');
                        $mediumEl.addClass('pw-medium');
                        $strongEl.addClass('pw-strong');
                        $pwdstronginputEl.val("Strong");
                    } else {
                        $pwdstronginputEl.val("Weak");
                    }
                    return true;
                });
            }

            var maxlen = function (value, max) {
                if (value && typeof value === 'string') {
                    if (value.length > max)
                        return '输入内容长度超过允许值：' + max + ',请精简内容！';
                }
                return '';
            };
            form.verify({
                maxlen20: function (value, item) { //value：表单的值、item：表单的DOM对象
                    return maxlen(value, 20);
                },
                confirmPass: function (value) {
                    if ($('input[name=Password]').val() !== value)
                        return '两次密码输入不一致！';
                }
            });
            form.on('submit(userRegister)', function (data) {
                var loadbtn = null,
                    registerData = data.field;

                $('.layui-input').removeAttr('failure');
                http.post(frontendapiConfig.customerRegister,
                    registerData,
                    function () { //beforeSend
                        loadbtn = button.load({
                            elem: '.register',
                            time: 10000
                        });
                    }
                ).done(function (response) {
                    if (response.state && response.state === 200) {
                        layer.alert(response.message, {
                            title: "注册成功",
                            icon: 1,
                            closeBtn: 0,
                            end: function () {
                                http.ajax.handleTargetUrl(response.data.returnUrl);
                            }
                        });
                    }
                }).fail(function (error) {
                    //For ModelValidation
                    if (error.status && error.status === 400) {
                        var validator = error.responseJSON;
                        if (validator.ErrorCode && validator.ErrorCode === "FluentValidationError") {
                            var validateTpl = document.getElementById('validateResultTpl').innerHTML;
                            laytpl(validateTpl).render(validator, function (html) {
                                http.ajax.showError({
                                    message: '提示信息',
                                    details: html
                                });
                            });
                            //标红校验错误的数据框
                            layui.each(validator.Errors, function (index, item) {
                                var inputField = item.ErrorField;
                                $("input[name=" + inputField + "]").attr('failure', '');
                            });
                        }
                    }
                }).always(function () {
                    loadbtn.stop(function () { });
                });

                return false;
            });
        });
    </script>

}
